﻿@inherits LayoutComponentBase


<Layout Id="layout-wrapper">
    <Sider Collapsible Collapsed=@collapsed NoTrigger>
        <div class="logo" />
        <NavMenu />
    </Sider>
    <Layout Class="site-layout">
        <Header Class="site-layout-background" Style="padding: 0;">
            @if (collapsed)
            {
                <Icon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
            else
            {
                <Icon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
            <span class="login-links">
                <LoginDisplay />
            </span>
        </Header>
        <Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 280px;">
            @Body
        </Content>
    </Layout>
</Layout>

@code
{
    bool collapsed;

    void toggle()
    {
        collapsed = !collapsed;
    }
}

<style>
    #layout-wrapper .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

        #layout-wrapper .trigger:hover {
            color: #1890ff;
        }

    #layout-wrapper .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }

    #layout-wrapper .site-layout .site-layout-background {
        background: #fff;
    }

    .login-links {
        float: right;
        padding: 0 24px;
    }

        .login-links * {
            margin-left: 12px;
        }
</style>